<template>
  <div class="app-container  dialog-w80">
    <div class="customContainer" style="background:#fff;overflow-y:auto;">
      <div style="width:1080px;height:800px;margin:0px 0 0 33px">
        <div style="width:420px;height:500px;float:left">
          <div style="background:skyblue;width:420px;height:420px" v-viewer>
            <img :src="imgSelected" alt style="width:420px;height:420px;display:block;object-fit:cover;" />
          </div>
          <viewer :images="imgList">
            <div v-for="(src,index) in imgList" :key="index" :class="src.split('?')[0]==imgSelected?'img-list-select':'img-list'">
              <img :src="src" :key="index" @click="onImgSelected(src)" alt class="img-small">
            </div>
          </viewer>
        </div>
        <div style="width:50%;height:400px;float:left">
          <div style="padding-left:50px;margin-top:30px;position:relative;">
            <span class="text-name-top text-name-first">名称：</span>
            <span class="text-name-true">{{listDetail.name}}</span>
          </div>
          <div style="padding-left:50px;margin-top:34px">
            <span class="text-name-top">门店进货价：</span> {{listDetail.money_sell | toFixed(2)}}
            <span v-if="$store.getters.orgId!=1&&listDetail.market_price>=listDetail.money_sell" style="color:#888;padding-left:100px">市场价：</span>
            <span v-if="$store.getters.orgId!=1&&listDetail.market_price>=listDetail.money_sell"
              style="text-decoration: line-through;color: rgb(187, 187, 187);">
              ￥{{listDetail.market_price | toFixed(2)}}</span>
          </div>
          <div style="padding-left:50px;margin-top:34px">
            <span class="text-name-top">类别：</span> {{listDetail.type_name}}
          </div>
          <div style="padding-left:50px;margin-top:34px">
            <span class="text-name-top">产品尺寸：</span> {{listDetail.product_size}}
          </div>
          <div style="padding-left:50px;margin-top:34px">
            <span class="text-name-top">包装尺寸：</span> {{listDetail.product_size}}
          </div>
          <div v-if="listDetail.is_ticket_convertible == 1 || listDetail.is_integral_convertible == 1" title="会员票数/非会员票数" style="padding-left:50px;margin-top:34px">
              <span class="text-name-top">兑换票数：</span>
               {{listDetail.ticket_value_vip || 0}}/{{listDetail.ticket_value || 0}}
          </div>
          <div style="padding-left:50px;margin-top:34px">
            <span v-if="formInline.from==2" class="text-name-top" style="color:#888;">剩余库存：</span>{{formInline.from==2?listDetail.num:''}}
            <span v-if="listDetail.box_num>0" class="text-name-top">箱规：</span>
            <span v-if="listDetail.box_num>0">{{listDetail.box_num+' '}}个/箱</span>
          </div>
          <div style="margin-left:50px;margin-top:42px;padding-top:20px;border-top:1px solid #ccc;display:flex;align-items:center">
            <span class="text-name-top">使用区域：</span>
            <el-select v-model="area_type" style="width:180px">
              <el-option v-for="item in gift_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div>
          <div style="margin-left:50px;padding-top:20px;display:flex;align-items:center">
            <span class="text-name-top">数量：</span>
            <el-input-number v-model="number" :min="1" :max="formInline.from==2 ? (listDetail.num*1>999999?999999:listDetail.num*1) : 999999"
              :step="listDetail.box_num*1>0?listDetail.box_num*1:1">
            </el-input-number>
            <el-button type="primary" @click="addcar()" style="margin-left:24px">加入购物车</el-button>
          </div>
        </div>
        <div style="width:100%;height:30px;float:left;font-size:16px;margin-top:20px;">
          <span>礼品详情</span>
        </div>
        <div style="width:100%;height:240px;line-height:10px;float:left;border-top:1px solid #ccc">
          <!-- 编码 -->
          <div style="width:30%;height:50%;float:left;margin-top:10px">
            <div>
              <span class="text-name">礼品编码：</span>
              <span>{{listDetail.gift_id}}</span>
            </div>
            <div>
              <span class="text-name">神采编码：</span>
              <span>{{listDetail.no_obsolete}}</span>
            </div>
            <div>
              <span class="text-name">国标码：</span>
              <span>{{listDetail.gb_code}}</span>
            </div>
          </div>
          <!-- 类别 -->
          <div style="width:30%;height:50%;float:left;margin-top:10px">
            <div>
              <span class="text-name">一级类别：</span>
              <span>{{listDetail.first_type}}</span>
            </div>
            <div>
              <span class="text-name">二级类别：</span>
              <span>{{listDetail.second_type}} </span>
            </div>
            <div>
              <span class="text-name">三级类别：</span>
              <span>{{listDetail.type_name}}</span>
            </div>
          </div>
          <!-- 采购渠道 -->
          <div style="width:30%;height:50%;float:left;margin-top:10px">
            <div>
              <span class="text-name">采购渠道：</span>
              <span>{{fromName[formInline.from]}}</span>
            </div>
            <div>
              <span class="text-name">{{formInline.from==1?"厂商名称：":"仓库名称："}}</span>
              <span>{{listDetail.from_name}}</span>
            </div>
            <div v-if="formInline.from==1">
              <span class="text-name">对接人：</span>
              <span>{{listDetail.docking_nick}}</span>
            </div>
          </div>
          <div style="width:100%;min-height:80px;margin-top:10px;line-height:26px;float:left;border-top:1px solid #ccc;">
            <div style="width:100%;height:100%;float:left;margin-top:10px;">
              <span class="text-name">礼品描述：</span>
              <span>{{listDetail.gift_describe == 'null' ? '' : listDetail.gift_describe}}</span>
            </div>
          </div>
          <div style="width:100%;height:22%;margin-top:10px;line-height:26px;float:left;border-top:1px solid #ccc;">
            <div style="width:100%;height:100%;float:left;margin-top:10px">
              <span class="text-name">上架时间：</span>
              <span>{{listDetail.on_sale_time}}</span>
            </div>
          </div>
        </div>

      </div>
    </div>
    <!-- 自定义底部 -->
    <div class="bottom_box">
      <el-badge class="item pull-right" style="position:relative">
        <!-- usedfor 1:运管系统门店采购下单，2：采购平台总部给中央仓下单，3：采购平台总部统配给门店 -->
        <router-link :to="{name:'warehouse/shoppingcar', params:{from:formInline.from,usedfor:1,routerflag:1}}">
          <div style="position:absolute;background:red;margin-left:70px;width:20px;height:20px;border-radius:50%;text-align:center;margin-top:-10px"
            v-if="!length==0">
            <span style="line-height:20px;color:#fff">{{length==0?'':length}}</span>
          </div>
          <img src="../../assets/images/car.png" alt="">
        </router-link>
      </el-badge>
    </div>
  </div>
</template>
<script>
import { getGiftDetails, get_clawtype, getPage, getList, addcar_submit, car, delGift, delCarList, save } from '@/api/goodsflow/gift_platform.js';
export default {
  data() {
    return {
      gift_list: [
        { name: '礼品机区域', id: '1' },
        { name: '礼品柜区域', id: '2' },
        { name: '摊位机区域', id: '3' },
        { name: '企划区域', id: '4' },
        { name: '其他区域', id: '5' }
      ],
      area_type: this.$store.getters.giftDisplay,
      imgSelected: '',
      imgList: [],
      listDetail: {},
      length: 0,
      number: 1,
      fromName: { '1': '供应商', '2': '中央仓' },
      formInline: {
        from: 0
      }
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      //当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
      vm.area_type = vm.$store.getters.giftDisplay;
      if (vm.$route.params.routerflag) {
        vm.listDetail = vm.$route.params.listDetail;
        vm.formInline.from = vm.$route.params.from;
        vm.number = vm.listDetail.box_num > 0 ? vm.listDetail.box_num : 1;
        vm.imgSelected = '';
        vm.imgList = [];
        getGiftDetails({
          gift_id: vm.listDetail.gift_id,
          from: vm.formInline.from
        }).then(response => {
          vm.listDetail = response;
          if (vm.listDetail && vm.listDetail.img_list && vm.listDetail.img_list.length > 0) {
            vm.imgSelected = vm.listDetail.img_list[0].img.split('?')[0];
            for (var i = 0; i < vm.listDetail.img_list.length; i++) {
              vm.imgList[i] = vm.listDetail.img_list[i].img;
            }
          }
        });
      }
      car({ type: vm.formInline.from }).then(response => {
        vm.length = response.length;
      });
    });
  },
  methods: {
    onImgSelected(src) {
      var img = src.split('?')[0];
      if (img == this.imgSelected) return;
      this.imgSelected = img;
    },
    addcar() {
      var data = {
        uid: JSON.parse(localStorage.getItem('USER_INFO')).id,
        gift_id: this.listDetail.gift_id,
        shop_num: this.number,
        type: this.formInline.from,
        money: this.listDetail.money_sell,
        area_type: this.area_type
      };
      this.$store.commit('updategiftDisplay', this.area_type);
      addcar_submit(data).then(response => {
        if (response.code == 1) {
          this.$message({
            type: 'success',
            message: '添加成功'
          });
          car({ type: this.formInline.from }).then(response => {
            this.length = response.length;
          });
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
div {
  font-size: 16px;
}

.img-small {
  width: 60px;
  height: 60px;
  object-fit: cover;
}

.img-list {
  width: 64px;
  height: 64px;
  float: left;
  margin: 20px 10px 10px 0;
  border: 0px;
  display: block;
  list-style: none;
}

.img-list-select {
  width: 64px;
  height: 64px;
  float: left;
  margin: 20px 10px 10px 0;
  display: block;
  list-style: none;
  border: 2px solid #3396fc;
}

.img-list:hover {
  border: 2px solid #3396fc;
}

.text-name {
  width: 86px;
  height: 30px;
  margin-top: 8px;
  line-height: 30px;
  display: inline-block;
  font-size: 16px;
  color: #888;
  text-align: right;
}
.text-name-top {
  width: 100px;
  display: inline-block;
  color: #888;
  text-align: right;
  margin-right: 8px;
}
.text-name-first {
  position: absolute;
  top: 3px;
}
.text-name-true {
  font-size: 20px;
  display: inline-block;
  margin-left: 108px;
}
</style>